<template>
	<div style="background-color: #f5f6f7;min-height: 100vh;">
		<view class="mine-container">
			<view class="header-section">

			</view>

			<view class="content-section">
				<view class="mine-actions text-center">
					<view class="money">
						金额（元）
					</view>
					<view class="money-1">
						{{ money }}
					</view>
					<view style="display: flex;justify-content: space-around;">
						<up-button @click="goDetails" style="width: 40%;">明细</up-button>
						<up-button type="primary" @click="goWithdraw" style="width: 40%;">提现</up-button>
					</view>
				</view>
				<view @click="AddBankCard">
					<view class="manage">绑定银行卡</view>
				</view>
			</view>
		</view>
	</div>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'
import { nextTick, ref } from 'vue'
import { getmoney } from '@/api/driver.js'


/* 数据 */
const money = ref(0)
const uToastRef = ref(null)



/* 方法 */
// 获取余额
const getMoneys = async () => {
	uToastRef.value.show({
		message: "加载中",
		type: 'loading',
		duration: -1
	})
	let res = await getmoney()
	uToastRef.value.hide()
	if (res.success) {
		money.value = res.data
	}
}
// 跳转提现
const goWithdraw = () => {
	uni.navigateTo({
		url: '/package_mine/pages/payReceive/withdrawal'
	})
}
// 跳转明细
const goDetails = () => {
	uni.navigateTo({
		url: '/package_mine/pages/payReceive/withdrawalDetails'
	})
}
// 跳转添加银行卡
const AddBankCard = () => {
	uni.navigateTo({
		url: '/package_mine/pages/payReceive/addBankCard'
	})
}
// 初始化封装
const init = async () => {
	await getMoneys()
}



/* 钩子 */
onShow(async () => {
	await nextTick()
	await init()
})

</script>

<style lang="scss" scoped>
.mine-container {
	width: 100%;
	height: 100%;


	.header-section {
		padding: 15px 15px 100px 15px;
		background-color: #3c96f3;
		overflow: hidden;
		background-size: 150% 150%;
		background-repeat: no-repeat;
		color: white;

		.login-tip {
			font-size: 18px;
			margin-left: 10px;
		}

		.cu-avatar {
			border: 2px solid #eaeaea;

			.icon {
				font-size: 40px;
			}
		}

		.user-info {
			margin-left: 15px;

			.u_title {
				font-size: 18px;
				line-height: 30px;
			}
		}

		.readinfo {
			&_title {
				width: max-content;
			}
		}
	}

	.content-section {
		position: relative;
		top: -50px;

		.mine-actions {
			margin: 15px 15px;
			padding: 20px 0px;
			border-radius: 8px;
			background-color: white;

			.action-item {
				&_image {
					width: 28px;
					height: 28px;
					margin: 0 auto 8px;
				}

				.icon {
					font-size: 28px;
				}

				.text {
					display: block;
					font-size: 13px;
					margin: 8px 0px;
				}
			}
		}
	}
}

.money {
	text-align: center;
	font-size: 30rpx;
	margin-bottom: 60rpx;
}

.money-1 {
	text-align: center;
	font-size: 60rpx;
	margin-bottom: 100rpx;
}

button {
	width: 40%;
}

.manage {
	color: #3c96f3;
	text-align: center;
}
</style>
